<template>
  <div class="itemLegend">
    <div class="loading" v-if="pageStat">
      <Loading></Loading>
    </div>
    <div class="content" v-if="!pageStat">
      <Title titleName="收藏项"></Title>
      <ul>
        <li v-for="item in itemLegend" :key="item.nodeName" @click="selectItem(item.id)">
          <span class="nodeName">{{item.nodeName}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Loading from '@/components/loading/Loading.vue'
  import Title from '@/components/title/Title.vue'


  export default {
    data() {
      return {
        pageStat: true,
        itemLegend: [],
        pageCount: 0
      }
    },
    components: {
      Loading,
      Title
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        console.log(this.$route.params.id)
        this.request(this.$route.params.id)

      },
      selectItem(id) {
        if (this.$route.params.flag) {
          this.$router.push({
            name: "SealsLegend",
            params: {
              id
            },
          });
        } else {
          this.$router.push({
            name: "LegendDetail",
            params: {
              id
            },
          });
        }


      },
      request(id) {
        axios
          .get("/api/getItemsLegend", {
            params: {
              id: id
            }
          })
          .then((res) => {
            console.log(res.data);
            this.itemLegend = res.data;
            this.$nextTick(() => {
              this.pageStat = false
            })
          })
          .catch((err) => {
            console.error(err);
          });
      },
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .loading {
    height: 718px;
    overflow: hidden;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: space-between;
  }

  li {
    width: 170px;
    border: 1px solid #ccc;
    margin: 7px;
    text-align: center;
  }

  li span {
    display: block;
  }

  .nodeName {
    font-size: 30px;
    font-weight: bold;
    padding: 5px;
  }

  .title {
    color: white;
    width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 45px;
    text-align: center;
    padding: 5px;
    border-bottom: 1px #ccc solid;
  }
</style>